<template>
  <div class="banner">
    <!-- 导航 -->
    <div class="nav">
      <router-link v-for="item in button" :to="item.url" :key="item.name">
        <el-button
          color="#fff"
          style="color: black; width: 100px"
          @click="headleclick(item.url)"
          >{{ item.name }}</el-button
        >
      </router-link>
    </div>
    <router-view />
  </div>
</template>
<script>
import { ElButton } from "element-plus";
import { ref } from "vue";
export default {
  setup() {
    const button = ref([
      { name: "产品列表", url: "/index/manage/list" },
      { name: "产品发布", url: "/index/manage/release" },
      { name: "产品状态", url: "/index/manage/status" },
    ]);
    const headleclick = (url) => {
      console.log(url);
    };
    const red = ref("red");
    return {
      button,
      headleclick,
      red,
    };
  },
  components: {
    ElButton,
  },
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  margin-right: 36px;
  height: 100%;
  overflow: auto;
  min-width: 1050px;
  .nav {
    display: inline-block;
    background-color: #fff;
    border-radius: 5px;
    .router-link-active {
      .el-button {
        background-color: #d9e1ca;
        border-color: #d9e1ca;
        color: #999798;
        border-radius: 5px;
      }
    }
  }
}
</style>
